<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/layui/css/layui.css">
<link href="$request.getContextPath()/resources/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<style type="text/css">
.layui-form .layui-form-item .layui-form-label{
   padding:8px;
}
.layui-form .layui-form-item .layui-input-inline{
  margin-left: 27px;
  width: 400px;
}
.layui-form .area .layui-input-inline{
  margin-left: 27px;
  width: 180px;
}
.layui-form .layui-form-item .layui-input-block textarea{
	margin-left: 14px;
}
.layui-form .layui-form-item .submit-btn{
  margin-left: 40%;
}
#userHeader{
  width: 780px;
  height: 400px;
  transition:all 0.3s;
  display:none;
}
.show{
  display:block;
  visibility: visible;
}
.layui-form .layui-form-item .layui-upload-button{
  margin-left: 27px;
}
#datepicker{
  padding-left: 27px;
}
</style>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">真实名称</label>
    <div class="layui-input-inline">
      <input type="text" name="realName" required  lay-verify="required" placeholder="请输入用户真实名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名称</label>
    <div class="layui-input-inline">
      <input type="text" name="userName" required  lay-verify="userName" placeholder="请输入用户名称" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">用户名称不可重复</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户类型</label>
    <div class="layui-input-inline">
      <select name="type" required lay-verify="required">
        <option value=""></option>
        <option value="admin">管理员</option>
        <option value="user">普通用户</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号码</label>
    <div class="layui-input-inline">
      <input type="tel" name="phone" required  lay-verify="phone" placeholder="请输入用户手机号码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户邮箱</label>
    <div class="layui-input-inline">
      <input type="text" name="email" required lay-verify="email" placeholder="请输入用户邮箱" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">密码6~18位</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">再次密码</label>
    <div class="layui-input-inline">
      <input type="password" name="repassword" required lay-verify="repassword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">密码6~18位</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户爱好</label>
    <div class="layui-input-inline">
      <input type="checkbox" name="userlikes" title="阅读" checked>
      <input type="checkbox" name="userlikes" title="写作">
      <input type="checkbox" name="userlikes" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户性别</label>
    <div class="layui-input-inline">
      <input type="radio" name="sex" value="man" title="男" checked>
      <input type="radio" name="sex" value="femal" title="女" >
      <input type="radio" name="sex" value="unknow" title="未知">
    </div>
  </div>
  <div class="layui-form-item input-group">
      <label class="layui-form-label">用户生日</label>
      <div class='input-group date' id='datepicker'>
		   <input type='text' class="form-control" name="birthday"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
		</div>
  </div>
  <div class="layui-form-item area">
    <label class="layui-form-label">用户地区</label>
    <div class="layui-input-inline">
      <select name="province" id="provinceSelect"><option></option></select>
    </div>
    <div class="layui-input-inline">
      <select name="city" id="citySelect"><option></option></select>
    </div>
    <div class="layui-input-inline">
      <select name="area" id="areaSelect"><option></option></select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text site-demo-upload">
    <label class="layui-form-label">用户头像</label>
	<div class="site-demo-upbar">
	    <input type="file" name="file" class="layui-upload-file">
	</div>
  </div>
  <div class="layui-form-item layui-form-text">
	  <img id="userHeader" src="$request.getContextPath()/resources/cws/images/header.jpg">
  </div>
  <input type="hidden" name="avator" value="">
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">个人描述</label>
    <div class="layui-input-block">
      <textarea name="remark" id="userDesc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block submit-btn">
      <button class="layui-btn" lay-submit lay-filter="userForm">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
<script type="text/javascript" src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script src="$request.getContextPath()/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layui/layui.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layui/lay/modules/element.js"></script>
<script src="$request.getContextPath()/resources/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="$request.getContextPath()/resources/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript">
$(function(){
     $('#datepicker').datepicker({
	    viewMode: 'years',
	    language:  'zh',
	    autoclose: 1,
	    language:  'zh-CN',
	    format: 'yyyy-mm-dd',  
	    todayHighlight: 1 
    });
    //加载省信息
	$.get('$request.getContextPath()/common/area/province', function(provinces) {
		    $("#provinceSelect").empty();
			for (var p = 0, plength = provinces.length; p < plength; p++) {
				var province = provinces[p];
				if(p==0){
 					$("#provinceSelect").append("<option value="+province.provinceCode+">"+ province.provinceName + "</option>")
				}else{
 					$("#provinceSelect").append("<option value="+province.provinceCode+">"+ province.provinceName + "</option>")
				}
			}
			//监听省选择
			$('#provinceSelect').change(function(){
				var provinceCode=$(this).children('option:selected').val();
				//获取省下的城市列表
				loadCity(provinceCode);
			});
			//加载第一个省下的城市列表
			var firstProvince=provinces[0].provinceCode;
			loadCity(firstProvince);
			
			//加载省下的城市列表
			function loadCity(provinceCode){
				$.get('$request.getContextPath()/common/area/city?provinceCode='+provinceCode, function(citys){
					$("#citySelect").empty();
					$("#areaSelect").empty();
					for (var c = 0, clength = citys.length; c < clength; c++) {
						var city = citys[c];
						$("#citySelect").append("<option value="+city.cityCode+">"+ city.cityName + "</option>")
					}
					//城市监听
					$('#citySelect').change(function(){
						var cityCode=$(this).children('option:selected').val();
						loadArea(cityCode);
					});
					//加载第一个城市列表下的地区列表
					var firstCityCode=citys[0].cityCode;
					loadArea(firstCityCode);
				});
			}
			
			//加载地区
			function loadArea(cityCode){
				$("#areaSelect").empty();
				//获取城市下的所有地区
				$.get('$request.getContextPath()/common/area/area?cityCode='+cityCode, function(areas){
					for (var a = 0, alength = areas.length; a < alength; a++) {
						var area = areas[a];
						$("#areaSelect").append("<option value="+area.areaCode+">"+ area.areaName + "</option>")
					}
				});
			}
	});
    //头像上传
    layui.use('upload', function(){
	  layui.upload({
		    url: '$request.getContextPath()/common/upload/img',
		    type:'images',
		    method: 'post',
		    success: function(res){
		       if(res.code==200){
		    	   $("#userHeader").addClass("show");
		    	   $("#userHeader").css("display", "block");
			       $("#userHeader").attr("src","$!url.zimg()/"+res.data);
			       $("input[name='avator']").val(res.data);
		       }
		       layer.msg(res.msg,{
		    		icon: 1,
		    		skin: 'demo-class',
		    		title :'信息',
		    	    area: ['300px', '160px'],
		    	    offset: 'rb'
		    	  });
		    }
	  });
   });
  //表单验证
  layui.use(['form', 'layedit', 'laydate'], function(){
	  var form = layui.form(),layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;
	  var userDescIndex=layedit.build('userDesc',{
        tool: [
          'strong' //加粗
          ,'italic' //斜体
          ,'underline' //下划线
          ,'|' //分割线
          ,'left' //左对齐
          ,'center' //居中对齐
          ,'right' //右对齐
        ]
      });
	  //自定义验证规则
	  form.verify({
		password: [/(.+){6,12}$/, '密码必须6到12位'],
	    repassword:function(repassword){
	    	if(repassword==null||repassword==''){
	    		return "请再次输入密码";
	    	}
	    	var password=$("input[name='password']").val();
	    	if(password!=repassword){
	    		return "两次输入密码不一致";
	    	}
	    }
	  });
	  //监听提交
	  form.on('submit(userForm)', function(data){
		  var remark=layedit.getText(userDescIndex);
  		  data.field.remark=remark;
		  $.post("../../system/user/add",data.field,function(data){
				if(data.code==200){
					//保存成功 关闭当前页
					top.layer.msg(data.msg,{
						icon: 1,
						skin: 'demo-class',
						title :'信息',
						time:500,
					    area: ['300px', '160px'],
					    offset: 'rb',
					    end :function(){
					    	var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
							parent.layer.close(index); //再执行关闭   
					    }
					});
				}else{
					layer.alert(data.msg);
				}
			});
	    return false;
	  });
   });
});
</script>
</html>